import React from 'react';
import { Row, Col } from 'antd';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import CustomCard from '../custom/CustomCard';
import CustomLineChart from './CustomLineChart';
import CustomPieChart from './CustomPieChart';
import CustomColumnChart from './CustomColumnChart';
import CustomWordCloud from './CustomWordCloud';

const AllChartsDemo: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // 示例数据
  const lineData = [
    { x: '00:00', y: 10 },
    { x: '04:00', y: 25 },
    { x: '08:00', y: 40 },
    { x: '12:00', y: 30 },
    { x: '16:00', y: 50 },
    { x: '20:00', y: 35 },
    { x: '24:00', y: 45 },
  ];

  const pieData = [
    { type: '移动端', value: 45, color: '#1890ff' },
    { type: '桌面端', value: 30, color: '#52c41a' },
    { type: '平板端', value: 15, color: '#722ed1' },
    { type: '其他', value: 10, color: '#faad14' },
  ];

  const columnData = [
    { category: '周一', value: 120, color: '#1890ff' },
    { category: '周二', value: 132, color: '#52c41a' },
    { category: '周三', value: 101, color: '#722ed1' },
    { category: '周四', value: 134, color: '#faad14' },
    { category: '周五', value: 90, color: '#f5222d' },
    { category: '周六', value: 230, color: '#13c2c2' },
    { category: '周日', value: 210, color: '#eb2f96' },
  ];

  const wordCloudData = [
    { word: '技术', value: 100 },
    { word: '创新', value: 80 },
    { word: '发展', value: 70 },
    { word: '人工智能', value: 90 },
    { word: '大数据', value: 60 },
    { word: '云计算', value: 55 },
    { word: '区块链', value: 45 },
    { word: '物联网', value: 50 },
    { word: '5G', value: 40 },
    { word: '网络安全', value: 35 },
    { word: '数字化', value: 65 },
    { word: '智能化', value: 60 },
    { word: '自动化', value: 55 },
    { word: '机器学习', value: 75 },
    { word: '深度学习', value: 70 },
  ];

  return (
    <div style={{ 
      padding: '24px', 
      background: theme.contentBackground,
      minHeight: '100vh'
    }}>
      <h1 style={{ 
        color: theme.textPrimary, 
        marginBottom: '24px',
        fontSize: '24px',
        fontWeight: 'bold'
      }}>
        所有图表组件演示
      </h1>
      
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <CustomCard style={{}}>
            <h2 style={{ 
              color: theme.textPrimary, 
              marginBottom: '16px',
              fontSize: '20px'
            }}>
              折线图
            </h2>
            <CustomLineChart 
              data={lineData} 
              title="用户活跃度趋势" 
              height={400}
              color="#1890ff"
            />
          </CustomCard>
        </Col>
        
        <Col span={12}>
          <CustomCard style={{}}>
            <h2 style={{ 
              color: theme.textPrimary, 
              marginBottom: '16px',
              fontSize: '20px'
            }}>
              饼图
            </h2>
            <CustomPieChart 
              data={pieData} 
              title="用户设备分布" 
              height={400}
            />
          </CustomCard>
        </Col>
        
        <Col span={12}>
          <CustomCard style={{}}>
            <h2 style={{ 
              color: theme.textPrimary, 
              marginBottom: '16px',
              fontSize: '20px'
            }}>
              柱状图
            </h2>
            <CustomColumnChart 
              data={columnData} 
              title="每日访问量" 
              height={400}
            />
          </CustomCard>
        </Col>
        
        <Col span={24}>
          <CustomCard style={{}}>
            <h2 style={{ 
              color: theme.textPrimary, 
              marginBottom: '16px',
              fontSize: '20px'
            }}>
              词云图
            </h2>
            <CustomWordCloud 
              data={wordCloudData} 
              title="热门关键词" 
              height={400}
            />
          </CustomCard>
        </Col>
      </Row>
    </div>
  );
};

export default AllChartsDemo;